<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-form ref="formRef" :model="state.ruleForm">
				<el-divider content-position="left">货款信息</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="订单数" prop="order_num">
							<el-input v-model="state.ruleForm.order_num" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="货款总额" prop="supplier_amt">
							<el-input v-model="state.ruleForm.supplier_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="总运费" prop="trans_amt">
							<el-input v-model="state.ruleForm.trans_amt" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="售后退款总额" prop="after_supplier_amt">
							<el-input v-model="state.ruleForm.after_supplier_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="手续费率" prop="commission">
							<el-input v-model="state.ruleForm.commission" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手续费" prop="commission_money">
							<el-input v-model="state.ruleForm.commission_money" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="应到货款总额" prop="money_answer">
							<el-input v-model="state.ruleForm.money_answer" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="实到货款总额" prop="money_reality">
							<el-input v-model="state.ruleForm.money_reality" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">收款信息</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="收款人" prop="bank_user_name">
							<el-input v-model="state.ruleForm.bank_user_name" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收款卡号" prop="bank_card">
							<el-input v-model="state.ruleForm.bank_card" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="开户行" prop="bank_name">
							<el-input v-model="state.ruleForm.bank_name" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">审核处理</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="审核结果" prop="status">
							<el-select v-model="state.ruleForm.status">
								<el-option label="审核同意" :value="1" />
								<el-option label="审核拒绝" :value="2" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col v-if="state.ruleForm.status === 2" :span="12">
						<el-form-item label="拒绝原因">
							<el-input v-model="state.ruleForm.reason" type="textarea" placeholder="请输入拒绝原因" :autosize="{ minRows: 2, maxRows: 6 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { supplierWithdrawalApi } from '/@/api';
import { floatMultiply } from '/@/utils/dictionary';

const SupplierWithdrawalApi = supplierWithdrawalApi();

let callback: Function = () => {};
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		order_num: '',
		supplier_amt: '',
		trans_amt: '',
		money_answer: '',
		after_supplier_amt: '',
		money_reality: '',
		commission: '',
		commission_money: '',
		bank_user_name: '',
		bank_card: '',
		bank_name: '',
		withdraw_id: '',
		status: 1,
		reason: '',
	},
});
const formRef = ref();

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		const ruleForm = state.ruleForm;
		if (ruleForm.status === 2 && !ruleForm.reason) return ElMessage.warning('请输入拒绝原因');
		_supplierWithdrawalCheck({
			withdraw_id: ruleForm.withdraw_id,
			status: ruleForm.status,
			reason: ruleForm.reason,
		});
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any, fn: Function) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.supplier_name}」供应商「${row.withdrawal_no}」提现单号货款审核`;
	callback = fn;
	state.ruleForm = {
		...row,
		commission: floatMultiply(row.commission, 1000) + '‰',
		withdraw_id: row.id,
		status: 1,
		reason: '',
	};
};

/********** 网络请求 **********/
// 初审审核
const _supplierWithdrawalCheck = (params: Object) => {
	SupplierWithdrawalApi.supplierWithdrawalCheck(params)
		.then(() => {
			ElMessage.success('操作成功');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
